<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>主页</title>
    <script src="./vue.js"></script>
    <style>
        .he {
            height: 520px;
            position: relative;
            overflow: hidden;
        }

        .he > div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            --offset: 0px;
            --blur: 2px;
        }

        .he > div > img {
            display: block;
            width: 110%;
            height: 100%;
            object-fit: cover;

            transform: translateX(var(--offset));
            filter: blur(var(--blur));

        }

    </style>


</head>
<body>
<div id="app">
    <div>

        <input checked="checked" type="radio" name="lanu" value="CHN" @click="change_language(1)"
               style="display:inline-block;">
        <p style="display:inline-block;" class="erann">中文</p>
        <input type="radio" name="lanu" value="ENG" @click="change_language(2)" style="display:inline-block;">
        <p style="display:inline-block;" class="erann">English</p>
        <input type="radio" name="lanu" value="JAP" @click="change_language(3)" style="display:inline-block;">
        <p style="display:inline-block;" class="erann">日本語</p>

    </div>
    <div class="he">
        <div><img src="static/imgs/b1.png"></div>
        <div><img src="static/imgs/b2.png"></div>
        <div><img src="static/imgs/b3.png"></div>
        <div><img src="static/imgs/b4.png"></div>
    </div>
    <div style="align-content: center">
        <p id="mainmeassge" style="font-size: 100px; text-align: center">{{message}}</p>
    </div>


    <a href="http://www.masaikk.xyz">个人主页</a>


</div>

<script>
    new Vue({
        el: "#app",
        data: {

            weltype: 1,
        },
        computed: {
            message() {
                switch (this.weltype) {
                    case 1:
                        return '欢迎';
                        break;
                    case 2:
                        return 'welcome';
                        break;
                    case 3:
                        return 'こんにちは';
                        break;
                    default:
                        return '欢迎';
                        break;

                }
            }
        },
        methods: {

            change_language(e) {
                this.weltype = parseInt(e);

            },
        },
        mounted() {


        }

    })

</script>

<script type="text/javascript">
    const images = document.querySelectorAll('.he > div > img');

    // console.log(1);
    document.querySelector('.he').addEventListener('mousemove', (e) => {
        let percentage = e.clientX / window.outerWidth;
        // console.log(percentage);
        let offset = 10 * percentage;
        let blur = 20;
        for (let [index, image] of images.entries()) {
            offset *= 1.3;

            let blurValue = (Math.pow((index / images.length - percentage), 2) * blur)

            image.style.setProperty('--offset', `${offset}px`);
            image.style.setProperty('--blur', `${blurValue}px`);

        }
    })


</script>


</body>
</html>
